<template>
  <div class="li-login">
    <div class="li-login-title">修改密码</div>
    <div class="li-login-sub">请输入新密码</div>
    <div>
      <nut-form :model-value="form">
        <nut-form-item>
          <!-- <nut-input v-model="form.password" type="password" placeholder="请输入新密码" input-class="li-login-ipt"
            placeholder-class="li-login-iptpl" /> -->

          <nut-input v-if="passwordType === 'password'" v-model="form.password" placeholder="请输入新密码"
            :type="passwordType" input-class="li-login-ipt" placeholder-class="li-login-iptpl"
            @input="handleInputPassword('password', $event)">
            <template #right>
              <div class="show-password" @click="handlePassword">
                <div class="i-ri:eye-off-fill"></div>
              </div>
            </template>
          </nut-input>

          <nut-input v-else v-model="form.password" placeholder="请输入新密码" :type="passwordType" input-class="li-login-ipt"
            placeholder-class="li-login-iptpl" @input="handleInputPassword('password', $event)">
            <template #right>
              <div class="show-password" @click="handlePassword">
                <div class="i-ri:eye-fill"></div>
              </div>
            </template>
          </nut-input>

        </nut-form-item>
        <check-psd v-model="form.password"></check-psd>
        <nut-form-item>
          <!-- <nut-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" input-class="li-login-ipt"
            placeholder-class="li-login-iptpl" /> -->

          <nut-input v-if="passwordType === 'password'" v-model="form.confirmPassword" placeholder="请再次输入密码"
            :type="passwordType" input-class="li-login-ipt" placeholder-class="li-login-iptpl"
            @input="handleInputPassword('confirmPassword', $event)">
            <template #right>
              <div class="show-password" @click="handlePassword">
                <div class="i-ri:eye-off-fill"></div>
              </div>
            </template>
          </nut-input>

          <nut-input v-else v-model="form.confirmPassword" placeholder="请再次输入密码" :type="passwordType"
            input-class="li-login-ipt" placeholder-class="li-login-iptpl"
            @input="handleInputPassword('confirmPassword', $event)">
            <template #right>
              <div class="show-password" @click="handlePassword">
                <div class="i-ri:eye-fill"></div>
              </div>
            </template>
          </nut-input>

        </nut-form-item>
      </nut-form>

    </div>
  </div>
  <div class="li-login-btns">
    <nut-button type="primary" custom-class="login-btn shake_o" :loading="loading" block @click="confirm">确定</nut-button>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "修改密码",
    "backgroundColorContent": "#ffffff"
  }
}
</route>

<script lang="ts" setup>
import auth from '@/api/auth'
import { cleanStringCompact } from '@/utils/shared.ts'

const form = ref({
  password: '',
  confirmPassword: '',
})

const loading = ref<boolean>(false)
async function confirm() {
  if (form.value.password === '' || form.value.password.length < 9) {
    uni.showToast({
      icon: 'none',
      title: '请输入新密码,且密码需大于等于9位',
    })
  }
  else if (form.value.password !== form.value.confirmPassword) {
    uni.showToast({
      icon: 'none',
      title: '确认密码与新密码不一致',
    })
  }
  else {
    const { data } = await auth.forceModifyPassword(form.value.password)
    if (data.status === 'success') {
      uni.showToast({
        icon: 'success',
        title: data.message
      })
      uni.redirectTo({
        url: '/pages/login/index'
      })
    }
    else {
      // 重置验证码和密码
      form.value.password = ''
      form.value.confirmPassword = ''
    }
  }
}

const passwordType = ref('password')
function handlePassword() {
  passwordType.value === 'password'
    ? (passwordType.value = 'text')
    : (passwordType.value = 'password')
}

// 处理输入事件
function handleInputPassword(inputName, event) {
  const value = event
  const filteredValue = cleanStringCompact(value)
  form.value[inputName] = filteredValue
}
</script>

<style lang="sass" scoped>
.reset
  .top
    background-color: #fff
    text-align: center
    padding: 30px
    .title
      font-weight: bold
      font-size: 20px
      margin-bottom: 10px
    .desc
      color: #8e8e8e
      margin-bottom: 40px
    .form
      margin-top: 40px
      .space
        display: flex
        justify-content: space-around
        padding: 10px
  .button
    margin: 10px 20px

.li-login-btns
  width: 100%
  display: flex
  align-items: center
  justify-content: space-around

.li-login
  width: 600rpx
  margin-left: 75rpx

:deep(.nut-cell-group__wrap)
  border-radius: 0!important
  box-shadow: none

:deep(.nut-cell-group__wrap .nut-cell)
  height: 100rpx
  background-color: #f8f8f8
  margin-bottom: 30rpx
  border-radius: 50rpx

:deep(.nut-form-item__body)
  justify-content: center

:deep(.li-login-ipt)
  color: #333

:deep(.li-login-iptpl)
  color: #d6d6d6

.li-login-ipt-btn
  color: #2196F3

.li-login-ipt-btndis
  color: #BBDEFB

.li-login-title
  font-size: 50rpx
  margin-top: 50rpx
  margin-left: 15rpx

.li-login-sub
  font-size: 28rpx
  color: #666666
  margin-top: 20rpx
  margin-bottom: 40rpx
  margin-left: 15rpx

:deep(.login-btn)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important
  width: 300rpx

:deep(.login-btn-not)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #eb0909!important
  width: 300rpx

.login-forget
  width: 100%
  margin-top: 20rpx
  display: flex
  align-items: center
  justify-content: center
  .login-forget-text
    color: #42A5F5
    margin-left: 5rpx

</style>